<template>
  <div
    ref="chartRef"
    :style="{'width': '100%', 'height': _height ? _height : '100%'}">
    <!-- Element UI Dialog 用于修改Y轴范围 -->
  </div>
</template>
<script setup lang='ts'>
import * as Echarts from 'echarts'
import themeEcharts from '/@/assets/css/themeEcharts'
import { ref, onMounted, watch } from 'vue'

const props = defineProps<{
  yAxisControl?: boolean,
  index?: number,
  title?: object,
  legend?: object,
  dataset?: object,
  grid?: object,
  axisPointer?: object,
  xAxis?: any[],
  yAxis?: any[],
  polar?: object,
  radiusAxis?: object,
  angleAxis?: object,
  radar?: object,
  dataZoom?: any[],
  visualMap?: object,
  tooltip?: object,
  toolbox?: object,
  brush?: object,
  geo?: object,
  parallel?: object,
  parallelAxis?: object,
  singleAxis?: object,
  timeline?: object,
  series?: any[],
  color?: any[],
  backgroundColor?: string,
  group?: string,
  data?: any[],
  graphic?: any[],
  useUTC?: boolean,
  _height?: string,
  touchOffResize?: boolean
}>()

const chartRef = ref(null)
let myEcharts: echarts.ECharts

onMounted(() => {
  myEcharts = Echarts.init(chartRef.value, themeEcharts)
  let option = setOption()
  myEcharts.setOption(option)
  watch(() => props, () => {
    option = setOption()
    myEcharts.setOption(option)
  }, { deep: true })
})

const setOption = () => {
  // 调试输出
  const option = {
    title: props.title,
    legend: props.legend,
    toolbox: props.toolbox,
    grid: props.grid,
    xAxis: Array.isArray(props.xAxis) ? props.xAxis : props.xAxis ? [props.xAxis] : [],
    yAxis: Array.isArray(props.yAxis) ? props.yAxis : props.yAxis ? [props.yAxis] : [],
    series: Array.isArray(props.series) ? props.series : props.series ? [props.series] : [],
    tooltip: props.tooltip,
    dataZoom: props.dataZoom,
    graphic: props.graphic
  };
  return option;
}

   
</script>